
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<style>
.imgbox
{
float:left;
text-align:center;
width:120px;
height:135px;
border:1px solid gray;
margin:4px;
padding:0px;
}
.thumbnail 
{
width:110px;
height:90px;
margin:3px;
}
.box
{
width:110px;
padding:0px;
}
</style>
<script>
function removeElement()
{
document.getElementById("imgbox1").style.display="none";
}
function changeVisibility()
{
document.getElementById("imgbox2").style.visibility="hidden";
}
function resetElement()
{
document.getElementById("imgbox1").style.display="block";
document.getElementById("imgbox2").style.visibility="visible";
}
</script>
<h1>CSS <span class="color_h1">Display(显示)</span> 与 <span class="color_h1">Visibility（可见性）</span>
</h1>
<hr/>
<p class="intro">display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。</p>
<div style="text-align:center">
<div style="width:394px;height:150px;margin-left:auto;margin-right:auto;text-align:left;border:1px solid gray">
<div class="imgbox" id="imgbox1">
Box 1<br/>
<img class="thumbnail" decoding="async" height="90" src="/images/klematis_small.jpg" width="107"/><br/>
</div>
<div class="imgbox" id="imgbox2">
Box 2<br/>
<img class="thumbnail" decoding="async" height="80" src="/images/klematis2_small.jpg" width="107"/>
</div>
<div class="imgbox">
Box 3<br/>
<img class="thumbnail" decoding="async" height="90" src="/images/klematis3_small.jpg" width="116"/>
</div>
</div>
</div>
<hr/>
<h2>隐藏元素 - display:none或visibility:hidden</h2>
<p>隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。</p>
<p>visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
h1.hidden {visibility:hidden;}</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
h1.hidden {display:none;}</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>CSS Display - 块和内联元素</h2>
<p>块元素是一个元素，占用了全部宽度，在前后都是换行符。</p>
<p>块元素的例子：</p>
<ul>
<li>&lt;h1&gt;</li>
<li>&lt;p&gt;</li>
<li>&lt;div&gt;</li>
</ul>
<p class="elem_d11">内联元素只需要必要的宽度，不强制换行。</p>
<p>内联元素的例子：</p>
<ul class="dd">
<li>&lt;span&gt;</li>
<li>&lt;a&gt;</li>
</ul>
<hr/>
<h2>如何改变一个元素显示</h2>
<p>可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。</p>
<p>下面的示例把列表项显示为内联元素：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
li {display:inline;}</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>下面的示例把span元素作为块元素：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
span {display:block;}</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p><b>注意：</b>变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。<br/></p>
<hr/>
<div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>更多实例</h2>
</div>
<p><a  target="_blank">如何显示元素的内联元素。</a></p>
<p>这个例子演示了如何显示一个元素的内联元素。</p>
<p><a  target="_blank">如何显示元素的块元素。</a></p>
<p>这个例子演示了如何显示一个元素的块元素。</p>
<p><a  target="_blank">如何使用一个表的collapse属性。</a></p>
<p>这个例子演示了如何使用表的collapse属性。</p> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    